<template>
  <div class="login">
    <el-form class="login-form" size="small" ref="loginForm" :model="loginForm">
      <el-form-item prop="username" :rules="usernameRules">
        <el-input v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item prop="password" :rules="passwordRules">
        <el-input type="password" v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// import axios from "axios";
import { mapMutations } from "vuex";
import { login } from "@/http/api";
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      usernameRules: [
        { required: true, message: "用户名不能为空", trigger: "blur" },
        {
          min: 5,
          max: 20,
          message: "用户名需要符合5-20位",
          trigger: "blur",
        },
        {
          pattern: /^[a-zA-Z0-9]+$/,
          message: "用户名不符合规则",
          trigger: "blur",
        },
      ],
      passwordRules: [
        { required: true, message: "请输入密码", trigger: "blur" },
        {
          min: 5,
          message: "密码长度不低于5位",
          trigger: "blur",
        },
      ],
      timer: null,
    };
  },
  methods: {
    ...mapMutations(["SET_TOKEN", "SET_USER_NAME"]),
    //登陆方法
    // login() {
    //   axios
    //     .post("http://localhost:8888/api/private/v1/login", {
    //       ...this.loginForm,
    //     })
    //     .then((res) => {
    //       if ((res.status >= 200 && res.status < 300) || res.status === 304) {
    //         if (res.data.meta.status === 200) {
    //           const {
    //             data: {
    //               meta: { msg },
    //               data: { token, username },
    //             },
    //           } = res;
    //           this.$message.success(msg);
    //           //vuex同步token，username
    //           // this.$store.commit("SET_TOKEN", token);
    //           // this.$store.commit("SET_USER_NAME", username);
    //           this.SET_TOKEN(token);
    //           this.SET_USER_NAME(username);
    //           this.timer = setTimeout(() => {
    //             this.$router.push({
    //               name: "Home",
    //             });
    //           }, 1500);
    //         } else {
    //           this.$message.error(res.data.meta.msg);
    //         }
    //       } else {
    //         this.$message({
    //           message: res.statusText,
    //           type: "error",
    //         });
    //       }
    //     });
    // },
    login() {
      this.$refs["loginForm"].validate(async (valid) => {
        if (valid) {
          try {
            const {
              data: { token, username },
            } = await login(this.loginForm);
            this.SET_TOKEN(token);
            this.SET_USER_NAME(username);
            this.timer = setTimeout(() => {
              this.$router.push({
                name: "Home",
              });
            }, 1500);
          } catch (error) {
            return error;
          }
        } else {
          return false;
        }
      });
    },
  },
  beforeDestroy() {
    window.clearTimeout(this.timer);
  },
};
</script>

<style scoped lang="stylus">
.login
  height 100vh
  display flex
  justify-content center
  align-items center
  .login-form
    width 300px
</style>
